<template>
	<view class="p-30">
		<view class="bg-fff p-30 br-10 m-b-30">
			<view class="flex">
				<view class="flex_1 title">故障申请{{ statusName }}</view>
				<u-tag :text="statusName" :type="formatStatus.type" plain plainFill></u-tag>
			</view>
			<u-divider></u-divider>
			<store-table :titleList="titleList" :dataList="dataList"></store-table>
			<view class="status p-t-30">
				设备状态：<text class="p-l-20 color-D91A1A statustext">{{ filterFunction(formData.status) || 'fang' }}</text>
			</view>
		</view>
		<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30 p-b-20">
			<view class="reason-title">故障原因</view>
			<view class="reason">{{ formData.description }}</view>
			<u-upload v-if="formData.fileList" :fileList="formData.fileList" name="img" multiple
				:maxCount="formData.fileList.length" :previewFullImage="true" :deletable="false" width="60"
				height="60"></u-upload>
		</view>
		<view class="bg-fff p-x-30 p-y-14 br-10 m-b-30">
			<person-detail :infoList="infoList" :info="formData"></person-detail>
		</view>
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="80">
			<view class="bg-fff p-30 br-10 m-b-30">
				<u-form-item label="寄出时间" prop="mailDate" :required="true">
					<view class="flex justify-between w-100" :class="[formData.mailDate ? '' : 'color-C7C7CC']"
						@click="dateHandler">
						<view>{{ formData.mailDate || '请选择寄出时间' }}</view>
						<u-icon name="arrow-down-fill" color="#C7C7CC"></u-icon>
					</view>
				</u-form-item>
				<u-line :color="lineColor"></u-line>
				<u-form-item v-if="formData.maintainId != '0'" label="寄回时间" prop="mailBackDate">
					<view class="flex justify-between w-100" :class="[formData.mailBackDate ? '' : 'color-C7C7CC']"
						@click="dateHandler2">
						<view>{{ formData.mailBackDate || '请选择寄回时间' }}</view>
						<u-icon name="arrow-down-fill" color="#C7C7CC"></u-icon>
					</view>
				</u-form-item>
				<u-line :color="lineColor"></u-line>
				<u-form-item label="返厂原因" labelPosition="top">
					<u--textarea class="m-t-20" height="80" :maxlength="-1" :show-confirm-bar="false" :confirmType="null"
						v-model="formData.reason" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</view>
			<view class="bg-fff p-x-30 br-10 m-b-30">
				<u-form-item label="厂家联系人" prop="factoryContacts" :required="true">
					<u--input placeholder="请输入联系人姓名" border="none" v-model="formData.factoryContacts"></u--input>
				</u-form-item>
				<u-line :color="lineColor"></u-line>
				<u-form-item label="联系方式" prop="contactInformation" :required="true">
					<u--input placeholder="请输入联系方式" border="none" v-model="formData.contactInformation"></u--input>
				</u-form-item>
			</view>
		</u--form>
		<u-button type="primary" text="提交" @click="onSubmit"></u-button>
		<u-datetime-picker ref="datePicker" :show="show" mode="date" @confirm="onConfirm" @cancel="onCancel">
		</u-datetime-picker>
		<u-datetime-picker ref="datePicker2" :show="show2" mode="date" @confirm="onConfirm2" @cancel="onCancel2">
		</u-datetime-picker>
	</view>
</template>

<script>
import {
	uploadbaseUrl
} from '@/request/request.js'
export default {
	data() {
		return {
			// value1: Number(new Date()),
			// value2: Number(new Date()),
			show: false,
			show2: false,
			lineColor: '#F2F2F2',
			info: {},
			formData: {
				mailDate: '',
				mailBackDate: '',
				factoryContacts: '',
				contactInformation: '',
				creatName: '',
				phone: '',
				declareDate: '',
				fileList: []
				// fileList: [{
				// 	url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// }],
			},
			infoList: [{
				name: '申报人',
				key: 'creatName'
			},
			{
				name: '联系方式',
				key: 'phone'
			},
			{
				name: '申报日期',
				key: 'declareDate'
			},
			],
			backList: [{
				name: '寄出时间',
				key: 'mailDate'
			},
			{
				name: '寄回时间',
				key: 'mailBackDate'
			},
			{
				name: '厂家联系人',
				key: 'factoryContacts'
			},
			{
				name: '联系方式',
				key: 'contactInformation'
			},
			],
			titleList: [{
				name: '器具名称',
				span: '7'
			},
			{
				name: '准确度',
				span: '5'
			},
			],
			tablecanList: [{
				name: '申请仪器',
				key1: 'name'
			},
			{
				name: '型号规模',
				key1: 'modelNumber'
			},
			{
				name: '准确度',
				key1: 'devicePrecision'
			},
			{
				name: '制造厂商',
				key1: 'manufacturer'
			},
			{
				name: '出厂编号',
				key1: 'factoryNumber'
			},
			],
			dataList: [{
				list: [{
					value: ''
				},
				{
					value: ''
				},
				],
				content: [{
					label: '申请仪器',
					value: ''
				},
				{
					label: '型号规模',
					value: ''
				},
				{
					label: '准确度',
					value: ''
				},
				{
					label: '制造厂商',
					value: ''
				},
				{
					label: '出厂编号',
					value: ''
				},
				],
			}],
			rules: {
				'mailDate': {
					type: 'string',
					required: true,
					message: '请填写寄出时间',
					trigger: ['blur', 'change']
				},

				'factoryContacts': {
					type: 'string',
					required: true,
					message: '请填写厂家联系人',
					trigger: ['blur', 'change']
				},
				'contactInformation': {
					type: 'string',
					required: true,
					message: '请填写联系方式',
					trigger: ['blur', 'change']
				},
				// 'mailBackDate': {
				// 	type: 'string',
				// 	required: true,
				// 	message: '请填写寄回时间',
				// 	trigger: ['blur', 'change']
				// },
			},
			statusName: '',
			type: '',
			taskId: '',
			equipList: []
		}
	},
	computed: {
		formatStatus() {
			if (this.statusName == '已处理') {
				return {
					type: 'success',
				}
			} else if (this.statusName == '处理中') {
				return {
					type: 'warning',
				}
			}
			return {
				type: 'error',
			}
		}
	},

	onLoad(options) {
		this.taskId = options.taskId
		this.statusName = options.statusName

		// this.type = options.type
		if (options.id) {
			this.getDetail(options.id)
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
		// 一定要写在这里，第一次填写寄出时间时候
		this.$refs.datePicker.innerValue = new Date().Format('yyyy-MM-dd')
	},
	methods: {
		// 过滤数据转化
		filterFunction(value) {
			let resolveData
			switch (value) {
				case 1:
					resolveData = '可正常使用';
					break;
				case 2:
					resolveData = '无法使用';
					break;
				case 3:
					resolveData = '返厂维修';
					break;
				default:
					resolveData = '';
			};
			return resolveData
		},
		// 获取详情
		getDetail(id) {
			this.$api.gettroubleDetail({
				id: id
			}).then(res => {
				this.formData = res.data
				this.formData.description = res.data.description.replaceAll("/r/n", "<br>")
				if (this.formData.maintainDTO) {
					this.formData.maintainDTO.reason = res.data.maintainDTO.reason.replaceAll("/r/n", "<br>")
				}
				this.equipList = [res.data.instrumentsDTO]
				let files = JSON.parse(JSON.stringify(res.data.troubleFiles))
				let arr = []
				if (res.data.troubleFiles && res.data.troubleFiles.length > 0) {
					this.formData.fileList = files.map((item) => {
						item.url = `${uploadbaseUrl}/${item.uploadName}`
						return item
					})
				}
				this.equipList.map((resdata, index) => {
					this.tablecanList.map((item) => {
						this.dataList[index].list[0].value = `${resdata.name}(${resdata.modelNumber})`
						this.dataList[index].list[1].value = `${resdata.devicePrecision}`
						this.dataList[index].content.map((items) => {
							if (item.name == items.label) {
								items.value = resdata[item.key1]
							}
						})
					})
				})
				if (this.formData.maintainId !== '0') {
					this.formData.mailDate = res.data.maintainDTO.mailDate
					this.formData.mailBackDate = res.data.maintainDTO.mailBackDate
					this.$refs.datePicker.innerValue = this.formData.mailDate
					this.$refs.datePicker2.innerValue = this.formData.mailBackDate || new Date().Format('yyyy-MM-dd')
					this.formData.reason = res.data.maintainDTO.reason
					this.formData.factoryContacts = res.data.maintainDTO.factoryContacts
					this.formData.contactInformation = res.data.maintainDTO.contactInformation
				}

			})
		},
		dateHandler() {
			if (this.formData.mailDate) {
				this.$refs.datePicker.innerValue = this.formData.mailDate
			} else {
				this.$refs.datePicker.innerValue = new Date().Format('yyyy-MM-dd')
			}
			this.show = true
		},
		dateHandler2() {
			this.show2 = true
			this.$refs.datePicker2.innerValue = this.formData.mailBackDate || new Date().Format('yyyy-MM-dd')
		},
		onConfirm(val) {
			this.formData.mailDate = new Date(val.value).Format('yyyy-MM-dd')
			this.onCancel()
		},
		onConfirm2(val) {
			this.formData.mailBackDate = new Date(val.value).Format('yyyy-MM-dd')
			this.onCancel2()
		},
		onCancel() {
			this.show = false
		},
		onCancel2() {
			this.show2 = false
		},

		async onSubmit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
				let params = JSON.parse(JSON.stringify(this.formData))
				params.troubleId = this.formData.id  //必须要troubleId
				if (this.formData.maintainId != '0') {
					// 修改返厂
					this.$api.editMalfunctionmaintain(params).then(res => {
						if (res.msg == 'success') {
							if (this.formData.mailBackDate) {
								this.NextFlow()
							} else {
								// 跳转回上一页
								uni.navigateBack({
									delta: 1
								});
							}

						}
					})
				} else {
					// 提交返厂
					this.$api.addMalfunctionmaintain(params).then(res => {
						if (res.msg == 'success') {

							this.NextFlow()

						}
					})
				}

			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		// 流程下一步
		NextFlow() {
			let params = {
				taskId: this.taskId
			}
			this.$api.onBackSubmit(params).then(res => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
				// 跳转回上一页
				uni.navigateBack({
					delta: 1
				});
				// uni.navigateTo({
				// 		url: `/pages/malfunction/malfunction`
				// 	});
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.reason-title {
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	padding-bottom: 20rpx;
}

.reason {
	white-space: pre-line;
	font-size: 20rpx;
	color: #666666;
	line-height: 36rpx;
	background: #F7F9FC;
	border-radius: 5rpx;
	padding: 20rpx 10rpx;
}

.status {
	font-size: 26rpx;
	color: #666666;
}

.statustext {
	font-size: 26rpx;
}
</style>